<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">   
*{
	margin: 0;
	padding: 0;
	font-family: "微软雅黑";
	color: #333333;
}
.list,li{
	margin:0;
}   
.scroll{
 	margin-left:10px;
  	margin-top:10px; 
  	width:270px; 
  	height:120px; 
  	overflow:hidden;
}   
.scroll li{ 
	width:270px; 
	height:30px; 
	line-height:30px; 
	margin-left:26px;
}   
.scroll li a{
 	font-size:14px;
 	color:#333; 
 	text-decoration:none;
}   
.scroll li a:hover{
 	color:#66CCFF;
}  
</style>   
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
</head>

<body>
<table width="270" border="0" cellpadding="0" cellspacing="0" style="margin-left:12px;">
	<tr><td align="left" height="50" style="font-size:22px;" valign="bottom">即将上线</td></tr>
</table>
<div class="scroll">   
	<ul class="list">   
 		<li><a href="#">《荒野大镖客》重磅来袭</a></li>   
		<li><a href="#">《星球大战外传》科幻迷不容错过</a></li>   
		<li><a href="#">《野鹅敢死队》重现战场</a></li>  
		<li><a href="#">《九死一生》原始丛林探险</a></li>   
		<li><a href="#">《荒野猎人》莱昂纳多复仇与熊搏斗</a></li> 
	</ul>   
</div>
<script type="text/javascript"> 
$(document).ready(function(){
	$(".scroll").hover(function(){//鼠标指向滚动区域
		clearTimeout(timeID);//中止超时，即停止滚动
	},function(){//鼠标离开滚动区域
		timeID=setInterval('autoScroll()',3000);   //设置超时函数，每过3秒执行一次函数
	});
});
function autoScroll(){   
	$(".scroll").find(".list").animate({   //自定义动画效果
 		marginTop : "-25px"   
	},500,function(){   
		$(this).css({"margin-top" : "0px"}).find("li:first").appendTo(this);   //把列表第一行内容移动到列表最后
	})   
}   
var timeID=setInterval('autoScroll()',3000);   //设置超时函数，每过3秒执行一次函数


</script> 
</body>
</html>